<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :offset="4" :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
        <el-card class="box-card" shadow="never">
          <div>
            <el-form
              ref="dataForm"
              :model="operationData"
              label-position="right"
              label-width="150px"
              style="width: 900px; margin-left:50px;"
            >
              <!-- 富文本 -->
              <el-form-item label="农场规则说明：">
                <div>
                  <div ref="editor" style="text-align:left;margin: 5px"></div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-button type="primary" style="display:block;margin:70px auto" @click="setOperation">立即创建</el-button>
  </div>
</template>
<script>
import { getFarmRule, addFarmRule } from "@/api/game/farmReq";
import { mapGetters } from "vuex";
import E from "wangeditor";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      headers: {
        Authorization: "Bearer " + getToken()
      },
      editor: "",
      operationData: {}
    };
  },
  computed: {
    ...mapGetters(["imagesUploadApi"])
  },
  created() {
    this.getFarmRule();
  },
  mounted() {
    //农场规则介绍
    this.editor = new E(this.$refs.editor);
    this.editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片
    // 不可修改
    this.editor.customConfig.uploadImgHeaders = this.headers;
    // 自定义文件名，不可修改，修改后会上传失败
    this.editor.customConfig.uploadFileName = "file";
    this.editor.customConfig.uploadImgServer = this.imagesUploadApi; // 上传图片到服务器
    this.editor.customConfig.onchange = html => {
      this.operationData.content = html;
    };
    this.editor.create();
  },
  methods: {
    getFarmRule() {
      getFarmRule({}).then(res => {
        console.log(res);
        this.operationData.content = res.data?res.data:'';
        this.editor.txt.html("<p>" + this.operationData.content + "</p>");
      });
    },

    setOperation() {
      let formdata = Object.assign({}, this.operationData);
      console.log(formdata);
      addFarmRule(formdata).then(res => {
        console.log("添加", res);
        this.$notify({
          title: "成功",
          message: "修改成功",
          type: "success",
          duration: 2000
        });
        // this.operationData = res.data;
      });
    }
  }
};
</script>